<template>
 
    <div class="charts" ref="charts">
        
    </div>
</template>

<script >
import echarts from 'echarts'

export default {
    name: "",
    data() {
        return {}
    },
    mounted(){
        //初始化echarts实例
        let lineCharts = echarts.init(this.$refs.charts)
        //配置数据
        lineCharts.setOption({
             xAxis:{
                show:false,
                min:0,
                max:100
             } ,
             yAxis:{
                //隐藏
                show:false,
                //均分
                type:'category'
             },
             //系列
             series:[
                {
                    type:"bar",
                    data:[78],
                    //柱状图的宽度
                    barWidth:10,
                    color:'yellowgreen',
                    //背景颜色设置
                    showBackground:true ,
                    //设置背景颜色
                    backgroundStyle:{
                        color:"#eee",
                    },       
                    //文本标签
                    label:{
                        show:true,
                        //改变文本内容
                        formatter:'|',
                        //文本标签位置调试
                        position:'right'
                    }        
                }
             ],
             //布局
             grid:{
                left:0,
                right:0,
                top:0,
                bottom:0,
             }


        })
    },
    components: {},
    methods: {}
}
</script>

<style >
   .charts{
    widows: 100%;
    height: 100%;
   }
</style>

